<template>
  <el-dialog
    :visible.sync="showDialog"
    :close-on-click-modal="true"
    :class="{'theme-color-dialog':isTheme, 'bg-color-dialog':!isTheme}"
    class="small-common-dialog-size"
    @close="closeDialog">
    <Title :title="`${editId?'编辑':'添加'}${isTheme?'主题色':'渐变色'}`" />
    <div class="dialog-color-list">
      <el-color-picker v-for="(item, index) in colorsValue" :key="index" v-model="colorsValue[index]" class="item"/>
    </div>
    <div class="dialog-btn">
      <el-button type="primary" size="small" @click="submit()">确定</el-button>
      <el-button type="info" size="small" class="cancel-btn-style" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addChartColor, editChartColor } from '@/api/reportManage';
import ElMessage from '@/utils/message';
import Title from '@/components/Title';
export default {
  components: { Title },
  props: {
    isTheme: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showDialog: false,
      colorsValue: [],
      editId: ''
    };
  },
  methods: {
    oepnDialog(id = null, colorsValue = []) {
      if (id) this.editId = id;
      colorsValue = _.cloneDeep(colorsValue);
      const num = this.isTheme ? 6 : 2;
      if (colorsValue && colorsValue.length > 0) {
        this.colorsValue = colorsValue;
        const len = colorsValue.length;
        if (len < num) {
          for (let i = 0; i < num - len; i++) {
            this.colorsValue.push('');
          }
        }
      } else {
        this.colorsValue = new Array(num);
      }
      this.showDialog = true;
    },
    closeDialog() {
      this.showDialog = false;
      this.editId = '';
      this.colorsValue = [];
      this.$emit('close');
    },

    submit() {
      const num = this.isTheme ? 6 : 2;
      let colorsValue = JSON.parse(JSON.stringify(this.colorsValue));
      colorsValue = colorsValue.filter(i => !!i);
      if (!colorsValue || colorsValue.length !== num) {
        ElMessage.warning('请选择颜色');
        return;
      }
      const params = {
        colors: colorsValue,
        type: this.isTheme ? 0 : 1
      };
      if (this.editId) {
        params.id = this.editId;
        this.editColor(params);
      } else {
        this.addColor(params);
      }
    },
    addColor(params) {
      // this.$emit('beforeAdd');
      addChartColor(params).then(res => {
        if (res.code === 200) {
          ElMessage.success('添加成功');
          this.closeDialog();
          this.updateColor();
        } else {
          ElMessage.error(res.message);
        }
      });
    },
    editColor(params) {
      editChartColor(params).then(res => {
        if (res.code === 200) {
          ElMessage.success('编辑成功');
          this.closeDialog();
          this.updateColor();
        } else {
          ElMessage.error(res.message);
        }
      }).catch(() => {
        this.updateColor();
      });
    },
    updateColor() {
      this.$store.dispatch('GetColorList');
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-color-list {
  display: flex;
  margin-top: 16px;
  justify-content: center;
  .item {
    margin-right: 12px;
    width: 32px !important;
    height: 32px !important;
    &::v-deep {
      .el-color-picker__trigger {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
      }
    }
  }
}
.bg-color-dialog {
  &::v-deep {
    .el-dialog {
      width: 220px !important;
    }
  }
}
.theme-color-dialog {
  &::v-deep {
    .el-dialog {
      width: 320px !important;
    }
  }
}
.dialog-btn {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
</style>
